<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程信息</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/swiper.min.css">
    <!--<link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">-->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.min.js' charset='utf-8'></script>
    <script type="text/javascript" src='../js/libs/sui/swiper.min.js' charset='utf-8'></script>
    <!--<script type="text/javascript" src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>-->
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>


<!-- 这里是页面内容区 -->
<div class="content native-scroll bg-white course">
    <!-- 幻灯片 -->
    <div class="swiper-container course-swiper">
        <div id="ct-lunbo" class="swiper-wrapper">
            <!--<div class="swiper-slide">-->
                <!--<img class="kc-img" src="public/images/lunbo.jpg" alt="">-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<img class="kc-img" src="public/images/portrait.jpg" alt="">-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<img class="kc-img" src="public/images/lunbo.jpg" alt="">-->
            <!--</div>-->
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <a class="kc-return ">
        <span class="icon iconfont p-l" onclick="javascript:closeWin();">&#xe61f;</span>
        <!--<span class="icon icon-left" onclick="window.history.back()"></span>-->
    </a>
    <!--标签页-->
    <div class="buttons-tab f-16">
        <!--<a href="#tab1" class="tab-link active button">课程目录</a>-->
        <a id="course-detail-a1" href="#tab2" class="tab-link active button">课程简介</a>
        <a id="course-detail-a2" href="#tab3" class="tab-link button">机构简介</a>
    </div>
    <div class="content-block course-panel">
        <div class="tabs course-tab p-l">
            <!--<div id="tab1" class="tab c-default active">
                <div class="course-time">
                    &lt;!&ndash; 加了bright 左边 圆圈高亮 不加默认为灰色&ndash;&gt;
                    <div class="item-time bright">
                        <div class="item-left">
                            <span>0</span>
                        </div>
                        <div class="item-right">
                            <div class="item-top">
                                <ul>
                                    <li>
                                        <div>android基础知识</div>
                                        <ol>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                        </ol>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item-time bright">
                        <div class="item-left">
                            <span>1</span>
                        </div>
                        <div class="item-right">
                            <div class="item-top">
                                <ul>
                                    <li>
                                        <div>android基础知识</div>
                                        <ol>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                            <li>avtivity生命周期</li>
                                        </ol>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div id="tab2" class="tab c-default active">
                <!--<div>
                    <p>课程背景:</p>
                    <span class="course-det">android是当前最流行的手机开发移动端语言，极其牛逼，掌握它加薪不是梦</span>
                </div>-->
          <!--      <div>
                    <p>核心内容:</p>
                    <ol class="course-det">
                        <li>掌握android基础知识。</li>
                        <li>学会熟悉运用android开发移动端应用。</li>
                    </ol>
                </div>
                <div>
                    <span style="font-size: .8rem"> 开发环境:</span>
                    <span class="course-det">Eclipse</span>
                </div>
                <div>
                    <p>适应人群:</p>
                    <span class="course-det">有一定Java基础的开发者</span>
                </div>-->

            </div>
            <div id="tab3" class="tab">
               <!-- <div class="row">
                    <div class="col-25"><img
                            src="http://gqianniu.alicdn.com/bao/upload..//tfsc../TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                            width="100%"></div>
                    <div class="col-75">
                        <div class="teacher">
                            <p class="c-default">张老师</p>
                            <p>高级软件开发工程师</p>
                        </div>
                        <p class="tech-intr">具有很强的团队精神，有良好的组织和协调能力，有强烈的集体荣誉感。自学能力强，喜欢钻研新技术，敢于面对和克服困难。熟练使用spring+str+hibernate
                            整合开发。熟练使用jsp、servlet、jstl、jdbc下的编程开发。 熟练使用eclipse
                            、ide开发工具，熟练掌握tomcat等web容器以及j2ee容器的配置以及部署，能够使用junit进行单元测试。熟练使用mvc框架搭建项目，以及自定义实现ajax框架。熟练掌握数据库的操作和sql语句，能熟练使用sqlXX和mysql进行系统开发。
                        </p>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
    <!--底部按钮组-->
    <div  class="botm-btn botm-height">
        <a id="call-phone" class="left btn1 t-center">
            <i class="iconfont icon f-normal">&#xe610;</i>
            <p class="c-gray">电话咨询</p>
        </a>
        <a id="follow-btn"  href="javascript:void(0);" class="middle btn1 t-center">
            <i class="iconfont icon f-normal icon-27kongxintaoxin ct-flag"></i>
            <p class="c-default ct-flag-p">关注收藏</p>
        </a>

      <!--  <a id="unfollow-btn" href="javascript:void(0);" class="middle btn1 t-center">
            <i class="iconfont icon f-normal icon-27kongxintaoxin"></i>
            <p class="c-default">取消关注</p>
        </a>
-->

        <a id="train-register" progress="false" class="right btn3 t-center">报名培训</a>
    </div>
</div>

<!-- 搜索列表展示 -->
<script id="course-detail" type="text/template">
    {@each courseList as it, index}
    <div>
        <p>课程背景:</p>
        <span class="course-det">$${it.CLASS_TYPE_DESC}</span>
    </div>

    {@/each}
</script>

<!-- 搜索列表展示 -->
<script id="organ-detail-intro" type="text/template">
    {@each courseList as it, index}

    <div class="row">
        <div class="col-25"><img
                src="&{url}&{it.LOGO_PIC}"
                width="100%"></div>
        <div class="col-75">
            <div class="teacher">
                <p class="c-default">&{it.ORGAN_NAME}</p>
                <p>&{it.CLASS_TYPE_NAME}</p>
            </div>
            <p class="tech-intr">$${it.ORGAN_DESC}
            </p>
        </div>
    </div>
    {@/each}
</script>

<script type="text/javascript">

    apiready = function() {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });
        var mLunboData="";
        setTimeout(function(){
            var course_swiper = new Swiper('.course-swiper', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                autoplay:3000,
                autoplayDisableOnInteraction : false,
                speed:600,
                loop:true,
                onClick: function(swiper){
                    var imgSize=mLunboData.length;
                    var index=swiper.activeIndex;
                    if(index==imgSize+1){
                        index=1;
                    }

                    //获取轮播id 并跳转到详情页面
                    var contentId = mLunboData[index - 1].CONTENT_ID;
                    openWin("news-detail", "news-detail.html", {
                        zixunId: contentId
                    });

                }
            });
        },1000);

        // 关注标志。true-可以关注；false-不可以关注
        var followFlag = false;
        // 取消关注标志。true-可以取消关注；false-不可以取消关注
        var unfollowFlag = false;

        // 获取轮播 SQL
        var cySql1 = "SELECT A.*, (SELECT H.CHANNEL_TYPE FROM CMS_CHANNEL H WHERE H.CHANNEL_ID = B.CHANNEL_ID) CHANNELTYPE ";
        cySql1 += "FROM CMS_CONTENT A, CMS_CHANNE_CONTENT B WHERE A.CONTENT_ID = B.CONTENT_ID AND B.CHANNEL_ID = 20 ORDER BY A.PUBLSIH_DATE";

        // 获取已关注班级课程的关注 ID SQL
        var sql3 = "SELECT GROUP_CONCAT(T.FOLLOW_ID SEPARATOR ',') AS FOLLOW_IDS FROM E_FOLLOW_CLASS T WHERE T.STATE = '1' AND T.STUDENT_ID = '{0}' AND T.CLASS_TYPE_ID = '{1}' GROUP BY T.STUDENT_ID, T.CLASS_TYPE_ID";

        // 关注的 SQL
        var sql4 = "INSERT INTO E_FOLLOW_CLASS(STUDENT_ID, CLASS_TYPE_ID, STATE, FOLLOW_DATE, CANCEL_DATE) VALUES('{0}', '{1}', 1, NOW(), NULL)";
        // 取消关注的 SQL
        var sql5 = "UPDATE E_FOLLOW_CLASS T SET T.STATE = '0', T.CANCEL_DATE = NOW() WHERE T.FOLLOW_ID IN ({0})";

        //该名学生是否已经报名参加该课程

        var sql6 = "SELECT A.* FROM (SELECT COUNT(*) AS REGISTCOUNT  FROM stu_enroll where STUDENT_ID = '{0}' and CLASS_TYPE_ID = '{1}') A";

        // 获取 URL 中的参数
        var paramObj = api.pageParam;

        // 获取登录学生的信息
        var stuInfo = null;

        // 获取轮播数据
        dbQuery(1, 10, cySql1, false, function (ret, err) {
            if (isObject(ret) && ret.statusCode == 0) {
                var lunboData = {
                    lunboList: ret.result,
                    url: getUrl()
                };
                mLunboData=lunboData.lunboList;
                $("#ct-lunbo").html(juicer($("#ct-lubo-tpl").html(), lunboData));
            }
        });

        var sql = "SELECT A.*, B.ORGAN_DESC, B.ORGAN_NAME,B.LOGO_PIC,B.PHONE FROM b_class_type A LEFT JOIN b_organ B ON A.ORGAN_ID = B.ORGAN_ID WHERE CLASS_TYPE_ID LIKE '{0}'";

        var className;
        var tuition;
        var organId;
        var courseId;
        if (isNotNull(paramObj)) {

            if(isLogin()) {
                getIsRegiste(false,false);
            }

            sql = sql.format(paramObj.classTypeId);
            dbQuery(1, 10, sql, true, function (ret, err) {
                if (isObject(ret) && ret.statusCode == 0) {

                    var courseData = {
                        courseList: ret.result,
                        url: getUrl(),
                    };
                    var phone = ret.result[0].PHONE;
                    className = ret.result[0].CLASS_TYPE_NAME;
                    tuition = ret.result[0].STD_FEE;
                    organId = ret.result[0].ORGAN_ID;
                    courseId =  ret.result[0].COURSE_ID;

                    $("#call-phone").on("click", function (event) {
                        event.preventDefault();
                        var $this = $(this);

                        api.confirm({
                            title: '提示',
                            msg: phone,
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
//                            alert($api.jsonToStr(ret));
                            var number = ret.text;
                            if (ret.buttonIndex == 1) {
                                window.location.href = "tel:" + phone;
                                if (isNotNull(phone)) {

//                                api.call({number : number});
                                }
                            }
                        });

                    });
                    var courseNode = document.getElementById('course-detail').innerHTML;
                    var courseHtml = juicer(courseNode, courseData);
                    $("#tab2").html(courseHtml);

                    $("#course-detail-a1").click();
                    $("#course-detail-a1").on("click", function () {
                        var courseNode = document.getElementById('course-detail').innerHTML;
                        var courseHtml = juicer(courseNode, courseData);
                        $("#tab2").html(courseHtml);
                    });


                    $("#course-detail-a2").on("click", function () {
                        var courseNodeOrgan = document.getElementById('organ-detail-intro').innerHTML;
                        var courseHtmlOrgan = juicer(courseNodeOrgan, courseData);
                        $("#tab3").html(courseHtmlOrgan);
                    });

                }
            });

            /**
             *
             * 获取关注 ID。
             *
             * @param isLoading 是否显示等待框
             *
             */
            function getFollowIds(isLoading) {
                if (isLogin()) {
                    stuInfo = getLoginStudentInfo();

                    if (isNotNull(stuInfo) && isNotNull(stuInfo.STUDENT_ID)) {
                        var tmpSql3 = sql3.format(stuInfo.STUDENT_ID, api.pageParam.classTypeId);

                        // 查询是否已关注
                        dbQuery(1, 1, tmpSql3, isLoading, function(ret, err) {
                            if (isObject(ret) && ret.statusCode == 0) {
                                // 如果关注 ID 不为空，表示已关注该公司
                                if (isArray(ret.result) && (ret.result.length > 0) && isNotEmpty(ret.result[0].FOLLOW_IDS)) {
                                    followIds = ret.result[0].FOLLOW_IDS;

                                    followFlag = false;
                                    unfollowFlag = true;

                                    $("#follow-btn").find(".ct-flag").removeClass("icon-27kongxintaoxin");
                                    $("#follow-btn").find(".ct-flag").addClass("icon-guanzhudutaoxin c-blue");
                                    $("#follow-btn").find(".ct-flag-p").text("取消关注");
                                } else {
                                    followFlag = true;
                                    unfollowFlag = false;
                                    $("#follow-btn").find(".ct-flag").removeClass("icon-guanzhudutaoxin c-blue");
                                    $("#follow-btn").find(".ct-flag").addClass("icon-27kongxintaoxin");
                                    $("#follow-btn").find(".ct-flag-p").text("关注收藏");
                                }
                            }
                        });
                    }
                }
            }

            /**
             *
             * 获取关注 ID。
             *
             * @param isLoading 是否显示等待框
             *
             */
            function getIsRegiste(isLoading,isIntent) {
                if (isLogin()) {
                    stuInfo = getLoginStudentInfo();

                    if (isNotNull(stuInfo) && isNotNull(stuInfo.STUDENT_ID)) {
                        var tmpSql6 = sql6.format(stuInfo.STUDENT_ID, api.pageParam.classTypeId);

                        // 查询是否已关注
                        dbQuery(1, 1, tmpSql6, isLoading, function(ret, err) {
                            if (isObject(ret) && ret.statusCode == 0) {

                                // 如果关注 ID 不为空，表示已关注该公司
                                if(ret.result[0].REGISTCOUNT > 0){
                                    toast("该课程你已经报过名了");
                                    $("#train-register").text("已报名");

                                } else {
                                    if(isIntent) {
                                        toRegisterPage();
                                    }
                                }
                            }
                        });
                    }
                }
            }

            $("#follow-btn").on("click",function() {

                if (isLogin()) {
                    if (followFlag && !unfollowFlag) {
                        if (isNotNull(stuInfo) && isNotNull(stuInfo.STUDENT_ID)) {
                            followFlag = false;
                            var tmpSql4 = sql4.format(stuInfo.STUDENT_ID, api.pageParam.classTypeId);

                            // 关注
                            dbExecute(tmpSql4, true, function(ret, err) {
                                if (isObject(ret) && ret.statusCode == 0) {
                                    toast("关注成功");

                                    //发送课程事件
                                    api.sendEvent({
                                        name: 'courseEvent'
                                    });
                                    // 获取关注 ID
                                    getFollowIds(true);
                                } else {
                                    toast("关注失败，稍后再试");
                                    $("#follow-btn").find(".ct-flag").removeClass("icon-guanzhudutaoxin c-blue");
                                    $("#follow-btn").find(".ct-flag").addClass("icon-27kongxintaoxin");
                                    $("#follow-btn").find(".ct-flag-p").text("关注收藏");
                                }
                            });
                        }
                    } else if(!followFlag && unfollowFlag){
                        if (isNotEmpty(followIds)) {
                            unfollowFlag = false;

                            var tmpFollowIds = followIds.split(",");
                            var tmpFollowIdsStr= "";

                            for (var i = 0; i < tmpFollowIds.length; i++) {
                                if (tmpFollowIds.length == 1) {
                                    tmpFollowIdsStr += ("'" + tmpFollowIds[i] + "'");
                                } else {
                                    if (i < (tmpFollowIds.length - 1)) {
                                        tmpFollowIdsStr += ("'" + tmpFollowIds[i] + "',");
                                    } else {
                                        tmpFollowIdsStr += ("'" + tmpFollowIds[i] + "'");
                                    }
                                }
                            }

                            var tmpSql5 = sql5.format(tmpFollowIdsStr);

                            // 取消关注
                            dbExecute(tmpSql5, true, function(ret, err) {
                                if (isObject(ret) && ret.statusCode == 0) {
                                    toast("取消关注成功");

                                    //发送课程事件
                                    api.sendEvent({
                                        name: 'courseEvent'
                                    });

                                    getFollowIds(true);
                                } else {
                                    toast("取消关注失败，稍后再试");
                                    $("#follow-btn").find(".ct-flag").removeClass("icon-27kongxintaoxin");
                                    $("#follow-btn").find(".ct-flag").addClass("icon-guanzhudutaoxin c-blue");
                                    $("#follow-btn").find(".ct-flag-p").text("取消关注");
                                }
                            });
                        }
                    }

                } else {
                    toLogin();
                }
            });

            // 获取关注 ID
            getFollowIds(false);



            // 监听登录事件
            api.addEventListener({
                name: "loginEvent"
            }, function(ret, err) {
                if(ret.value.flag === "registerFlag") {
                    getIsRegiste(false,true);

                }
                getFollowIds(true);
                // 获取关注 ID

            });

            $("#train-register").on("click",function() {
                if (isLogin()) {
                    getIsRegiste(false,true);
                } else {
                    toLogin({flag : "registerFlag"});
                }
            });
        }

        function toRegisterPage() {
            openWin("train-register", "train-register.html",{
                classTypeId : paramObj.classTypeId,
                courseName : className,
                tuition : tuition,
                organId : organId,
                courseId :courseId
            });
        }
    }
</script>

<!-- 轮播模版 -->
<script id="ct-lubo-tpl" type="text/template">
    {@each lunboList as it, index}
    <div class="swiper-slide">
        <img class="w-100p" style="height: 7rem;" src="&{url}&{it.TITLE_IMG}" alt="">
    </div>
    {@/each}
</script>


</body>
</html>
